<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环境检测 - HPAdmin</title>
    <link rel="stylesheet" href="./static/style.css">
    <style>
        #app {
            padding: 30px;
        }
        .el-card__body{
            padding:0 !important;
        }

        .steps-wrap {
            width: 900px;
            margin: 0 auto;
        }

        .card-wrap {
            margin-top: 30px;
        }

        .card-wrap .box-card {
            width: 900px;
            margin: 0 auto;
        }

        .card-wrap .box-card .clearfix {
            font-weight: 700;
        }

        .card-wrap .box-card .content {
            height: 500px;
            overflow-y: auto;
            border: 1px solid #e1e1e1;
            padding: 10px;
        }

        .card-wrap .box-card .content .title {
            padding: 0 0 10px 0;
            margin: 35px 0 5px 0;
            font-weight: 700;
            border-bottom: 1px solid #e1e1e1;
        }

        .card-wrap .box-card .action {
            padding: 10px 10px 10px 0;
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="page">
            <div class="steps-wrap">
                <el-steps :active="steps.active" :space="200" finish-status="success" process-status="finish"
                    align-center>
                    <el-step v-for="(item,index) in steps.list" :key="index" :title="item.title"></el-step>
                </el-steps>
            </div>
            <div class="card-wrap">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>环境检测</span>
                    </div>
                    <div class="content">
                        <div class="title">服务器信息</div>
                        <el-table :data="tableData1" style="width: 100%" border>
                            <el-table-column prop="name" label="检测项目">
                            </el-table-column>
                            <el-table-column prop="value" label="检测结果">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.result"
                                        style="color: MediumSeaGreen;">{{scope.row.value}}</span>
                                    <span v-if="!scope.row.result" style="color: red;">{{scope.row.value}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="title">函数检测</div>
                        <el-table :data="tableData2" style="width: 100%" border>
                            <el-table-column prop="name" label="函 数 名">
                            </el-table-column>
                            <el-table-column prop="value" label="检测结果">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.result"
                                        style="color: MediumSeaGreen;">{{scope.row.value}}</span>
                                    <span v-if="!scope.row.result" style="color: red;">{{scope.row.value}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="title">目录权限检测</div>
                        <el-table :data="tableData3" style="width: 100%" border>
                            <el-table-column prop="name" label="目 录 名">
                            </el-table-column>
                            <el-table-column prop="value" label="检测结果" width="150">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.result"
                                        style="color: MediumSeaGreen;">{{scope.row.value}}</span>
                                    <span v-if="!scope.row.result" style="color: red;">{{scope.row.value}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="action">
                        <el-button size="small" type="danger" plain @click="openWin('/install/index.html','up')">上一步
                        </el-button>
                        <el-button size="small" type="success" plain @click="openWin('/install/step2.html','next')">下一步
                        </el-button>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
    <!-- 引入Vue -->
    <script src="./static/vue-2.6.14.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./static/element-ui@2.15.3.css">
    <!-- 引入组件库 -->
    <script src="./static/element-ui@2.15.3.js"></script>
    <script src="./static/axios.min.js"></script>
    <script>
        var _this;
        new Vue({
            el: '#app',
            data: function () {
                return {
                    loadingObj: '',
                    steps: {
                        active: 1,
                        list: [
                            {
                                title: '使用协议',
                            },
                            {
                                title: '环境检测',
                            },
                            {
                                title: '数据配置',
                            },
                            {
                                title: '开始安装',
                            },
                            {
                                title: '安装完成',
                            },
                        ],
                    },
                    tableData1: [],
                    tableData2: [],
                    tableData3: [],
                }
            },
            created() {
                _this = this;
                _this.initify();
            },
            methods: {
                getData() {
                    axios.get('/step1')
                        .then(function (response) {
                            var res = response.data;
                            _this.tableData1 = res.data.server;
                            _this.tableData2 = res.data.fun;
                            _this.tableData3 = res.data.dir;
                            _this.loadingObj.close();
                        })
                        .catch(function (error) {
                            _this.loadingObj.close();
                            console.log(error);
                        });
                },
                openWin(path, action) {
                    if (action == 'next') {
                        // 检测环境
                        if (!_this.tableData1.every(val => val.result)) {
                            _this.$message({
                                message: '环境检测不通过',
                                type: 'error'
                            });
                            return;
                        }
                        // 检测函数
                        if (!_this.tableData2.every(val => val.result)) {
                            _this.$message({
                                message: '函数检测不通过',
                                type: 'error'
                            });
                            return;
                        }
                        // 检测目录权限
                        if (!_this.tableData3.every(val => val.result)) {
                            _this.$message({
                                message: '目录权限检测不通过',
                                type: 'error'
                            });
                            return;
                        }
                    }
                    window.location.href = path;
                },
                initify() {
                    _this.loadingObj = _this.$loading({
                        lock: true,
                        text: '正在加载中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255, 255, 255)'
                    });
                    _this.getData();
                },
            },
        })
    </script>
</body>

</html>